<template>
  <div>
    <h1>Person组件</h1>
    <h4 style="color: red;">Count组件求和：{{ sum }}</h4>
    <h4>第一个人的名字：{{ getFirstPersonName }}</h4>
    <input v-model="name" type="text" placeholder="输入姓名..."/>
    <button @click="addPerson">添加</button>
    <button @click="addPersonFromServer">添加网络数据</button>
    <ul>
        <li v-for="p in personList " :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>

import { nanoid } from "nanoid";

export default {
    name:'Person',
    data() {
        return {
            name:''
        }
    },
    methods: {
        addPerson(){
            const perObj = {
                id:nanoid(),
                name:this.name
            }
            this.$store.commit('personAbout/ADD_PERSON',perObj)
            this.name = ''
        },
        addPersonFromServer(){
            this.$store.dispatch('personAbout/addPersonFromServer')
        }
    },
    computed: {
        personList(){
            return this.$store.state.personAbout.personList
        },
        sum(){
            return this.$store.state.countAbout.sum
        },
        getFirstPersonName(){
            return this.$store.getters['personAbout/getFirstPersonName']
        }
    },
}
</script>

<style>

</style>